<template>
	<view class="page" :class="{ 'night-mode': isNightMode }">
		<!-- 头部区域 -->
		<view class="header">
			<view class="user-info">
				<image class="avatar" src="/static/login.png" mode="aspectFill"></image>
				<view class="user-details">
					<text class="username">{{ userInfo.name }}</text>
					<text class="user-role">教师</text>
				</view>
			</view>
			<view class="header-actions">
				<uni-icons type="search" size="24" color="#333"></uni-icons>
				<uni-icons type="chat" size="24" color="#333"></uni-icons>
				<view class="create-class-btn" @tap="showCreateClassModal">
					<text class="plus-icon">+</text>
				</view>
			</view>
		</view>

		<!-- 主要内容 -->
		<view class="content">
			<!-- 教师端功能入口 -->
			<view class="quick-access">
				<view class="quick-access-item" v-for="(item, index) in teacherQuickAccessList" :key="index" @tap="handleTeacherQuickAccess(item)">
					<text class="quick-access-text">{{ item.name }}</text>
				</view>
			</view>
			
			<!-- 消息动态区域 -->
			<view class="message-section">
				<view class="section-header">
					<view class="title-row">
						<text class="title-text">消息动态</text>
						<view class="tab-buttons">
							<text class="tab-button" :class="{ active: activeTab === 'message' }" @tap="switchTab('message')">消息</text>
							<text class="tab-button" :class="{ active: activeTab === 'unread' }" @tap="switchTab('unread')">未读</text>
						</view>
					</view>
				</view>
				<view class="message-list">
					<view class="message-item" v-for="(msg, index) in messageList" :key="index" @tap="handleMessageClick(msg)">
						<view class="avatar-circle">
							<text class="avatar-text">{{ msg.title.charAt(0) }}</text>
						</view>
						<view class="message-content">
							<view class="message-header">
								<view class="message-title-wrapper">
									<text class="message-title">{{ msg.title }}</text>
								</view>
								<text class="message-time">{{ msg.time }}</text>
							</view>
							<text class="message-preview">{{ msg.preview }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 创建班级模态框 -->
		<view v-if="showCreateModal" class="modal-overlay" @tap="closeCreateModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">创建班级</text>
					<uni-icons type="close" size="20" color="#999" @tap="closeCreateModal"></uni-icons>
				</view>
				<view class="modal-body">
					<view class="form-item">
						<text class="form-label">班级名称</text>
						<input class="form-input" v-model="classForm.name" placeholder="请输入班级名称" />
					</view>
					<view class="form-item">
						<text class="form-label">班级描述</text>
						<textarea class="form-textarea" v-model="classForm.description" placeholder="请输入班级描述"></textarea>
					</view>
					<view class="form-item">
						<text class="form-label">最大人数</text>
						<input class="form-input" v-model="classForm.maxStudents" type="number" placeholder="请输入最大人数" />
					</view>
					<view class="form-item">
						<text class="form-label">班级头像</text>
						<view class="avatar-upload" @tap="chooseAvatar">
							<image v-if="classForm.avatar" :src="classForm.avatar" class="avatar-preview"></image>
							<view v-else class="avatar-placeholder">
								<uni-icons type="camera" size="30" color="#999"></uni-icons>
								<text class="upload-text">点击上传头像</text>
							</view>
						</view>
					</view>
					<view class="form-actions">
						<button class="cancel-btn" @tap="closeCreateModal">取消</button>
						<button class="confirm-btn" @tap="createClass">创建班级</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed, onMounted, onUnmounted } from 'vue';
	import themeManager from '@/utils/theme.js';

	// 夜间模式状态
	const isNightMode = ref(themeManager.getNightMode());

	// 主题变化回调
	const onThemeChanged = (newMode: boolean) => {
		isNightMode.value = newMode;
	};

	// 用户信息
	const userInfo = ref({
		name: '周雨晴',
		role: 'teacher' // 默认为教师
	});
	
	// 教师端快速访问列表
	const teacherQuickAccessList = ref([
		{ name: '创建班级', path: '/pages/class/create-class' },
		{ name: '课表管理', path: '/pages/class/teacher-schedule' },
		{ name: '学生管理', path: '/pages/class/student-management' },
		{ name: '数据统计', path: '/pages/class/statistics' },
		{ name: '班级申请', path: '/pages/class/application' }
	]);

	// 当前激活的标签
	const activeTab = ref('message');

	// 计算消息列表（从班级列表生成）
	const messageList = computed(() => {
		return classList.value.map(cls => ({
			title: cls.name,
			preview: cls.lastMessage,
			time: cls.time,
			unreadCount: cls.unreadCount
		}));
	});

	// 创建班级相关数据
	const showCreateModal = ref(false);
	const classForm = ref({
		name: '',
		description: '',
		maxStudents: '',
		avatar: ''
	});

	// 班级列表数据
	const classList = ref([
		{
			id: 1,
			name: '高等数学',
			description: '微积分基础课程',
			avatar: '',
			lastMessage: '请及时提交本周的微积分作业，截止时间今晚23:59',
			time: '10:30',
			unreadCount: 2
		},
		{
			id: 2,
			name: '英语',
			description: '英语口语训练',
			avatar: '',
			lastMessage: '明天下午2点有外教在线口语课，请提前准备',
			time: '09:15',
			unreadCount: 0
		},
		{
			id: 3,
			name: '物理',
			description: '力学实验课程',
			avatar: '',
			lastMessage: '力学实验报告已批改完成，请查看成绩',
			time: '昨天',
			unreadCount: 1
		},
		{
			id: 4,
			name: '程序设计',
			description: 'Java编程基础',
			avatar: '',
			lastMessage: '本周的Java编程作业已发布，请及时完成',
			time: '昨天',
			unreadCount: 0
		}
	]);

	// 页面加载时获取用户信息
	onMounted(() => {
		// 从本地存储获取用户信息
		const storedUserInfo = uni.getStorageSync('userInfo');
		if (storedUserInfo) {
			userInfo.value = storedUserInfo;
		}
		
		// 添加主题变化监听器
		themeManager.addListener(onThemeChanged);
		
		// 根据用户角色设置tabBar
		setTabBarByRole();
	});

	// 页面卸载时移除监听器
	onUnmounted(() => {
		themeManager.removeListener(onThemeChanged);
	});
	
	// 根据用户角色设置tabBar
	const setTabBarByRole = () => {
		// 设置教师端tabBar（将"直播"改为"我的班级"）
		uni.setTabBarItem({
			index: 1,
			text: "我的班级",
			iconPath: "static/class.png",
			selectedIconPath: "static/class.png",
			pagePath: "pages/class/my-classes"
		});
		
		uni.setTabBarItem({
			index: 2,
			text: "我的",
			iconPath: "static/schedule.png",
			selectedIconPath: "static/schedule.png",
			pagePath: "pages/profile/profile"
		});
	};

	// 处理教师端快速访问点击
	const handleTeacherQuickAccess = (item: any) => {
		uni.navigateTo({
			url: item.path
		});
	};

	// 切换消息标签
	const switchTab = (tab: string) => {
		activeTab.value = tab;
		uni.showToast({
			title: `切换到${tab === 'message' ? '消息' : '未读'}`,
			icon: 'none'
		});
	};

	// 处理消息点击
	const handleMessageClick = (msg: any) => {
		// 查找对应的班级信息
		const classInfo = classList.value.find(cls => cls.name === msg.title);
		if (classInfo) {
			// 跳转到班级页面，传递完整的班级信息
			uni.navigateTo({
				url: `/pages/class/class?classId=${classInfo.id}&className=${encodeURIComponent(classInfo.name)}&classDescription=${encodeURIComponent(classInfo.description)}&classAvatar=${encodeURIComponent(classInfo.avatar)}`
			});
		} else {
			// 其他消息显示提示
			uni.showToast({
				title: `点击了${msg.title}`,
				icon: 'none'
			});
		}
	};

	// 显示创建班级模态框
	const showCreateClassModal = () => {
		showCreateModal.value = true;
	};

	// 关闭创建班级模态框
	const closeCreateModal = () => {
		showCreateModal.value = false;
		// 重置表单
		classForm.value = {
			name: '',
			description: '',
			maxStudents: '',
			avatar: ''
		};
	};

	// 选择头像
	const chooseAvatar = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				// BACKEND REQUIRED: 上传图片到后端
				// POST /api/upload/avatar
				// 这里先使用本地路径，实际应该上传到服务器
				classForm.value.avatar = res.tempFilePaths[0];
				
				uni.showToast({
					title: '头像选择成功',
					icon: 'success'
				});
			},
			fail: () => {
				uni.showToast({
					title: '选择头像失败',
					icon: 'none'
				});
			}
		});
	};

	// 创建班级
	const createClass = () => {
		// 表单验证
		if (!classForm.value.name.trim()) {
			uni.showToast({
				title: '请输入班级名称',
				icon: 'none'
			});
			return;
		}

		if (!classForm.value.maxStudents || parseInt(classForm.value.maxStudents) <= 0) {
			uni.showToast({
				title: '请输入有效的最大人数',
				icon: 'none'
			});
			return;
		}

		// BACKEND REQUIRED: 创建班级API
		// POST /api/class/create
		// Request Body:
		// {
		//   name: string,
		//   description: string,
		//   maxStudents: number,
		//   avatar: string (图片URL)
		// }
		
		uni.showLoading({
			title: '创建中...'
		});

		// 模拟API调用
		setTimeout(() => {
			uni.hideLoading();
			
			// 模拟成功响应
			uni.showToast({
				title: '班级创建成功',
				icon: 'success'
			});

			// 将新创建的班级添加到列表
			const newClass = {
				id: Date.now(),
				name: classForm.value.name,
				description: classForm.value.description || '新创建的班级',
				avatar: classForm.value.avatar,
				lastMessage: '欢迎加入新班级！',
				time: '刚刚',
				unreadCount: 0
			};
			classList.value.unshift(newClass);

			// 自动跳转到新创建的班级
			setTimeout(() => {
				uni.navigateTo({
					url: `/pages/class/class?classId=${newClass.id}&className=${encodeURIComponent(newClass.name)}&classDescription=${encodeURIComponent(newClass.description)}&classAvatar=${encodeURIComponent(newClass.avatar)}`
				});
			}, 500);

			// 关闭模态框
			closeCreateModal();

			// BACKEND REQUIRED: 刷新用户班级列表
			// GET /api/user/classes
		}, 1500);
	};
</script>

<style>
	page {
		background-color: #f5f5f5;
		transition: background-color 0.3s ease;
	}

	.page {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: all 0.3s ease;
	}

	/* 夜间模式样式 */
	.night-mode {
		background-color: #1a1a1a;
	}

	.night-mode .header {
		background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
	}

	.night-mode .message-section,
	.night-mode .schedule-section {
		background: #2c2c2c;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
	}

	.night-mode .section-title,
	.night-mode .message-title,
	.night-mode .course-name {
		color: #e0e0e0;
	}

	.night-mode .message-preview,
	.night-mode .course-teacher {
		color: #b0b0b0;
	}

	.night-mode .message-item {
		border-bottom-color: #3a3a3a;
	}

	.night-mode .schedule-item {
		border-bottom-color: #3a3a3a;
	}

	.header {
		width: 100%;
		background: linear-gradient(135deg, #1976D2 0%, #64B5F6 100%);
		padding: 40rpx 30rpx 30rpx;
		padding-top: calc(40rpx + env(safe-area-inset-top));
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		border: 3rpx solid rgba(255, 255, 255, 0.3);
	}

	.user-details {
		display: flex;
		flex-direction: column;
	}

	.username {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.user-role {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.header-actions {
		display: flex;
		gap: 30rpx;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		flex: 1;
	}

	.quick-access {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
		margin-bottom: 40rpx;
	}

	.quick-access-item {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 60rpx 20rpx;
		text-align: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
		border: 2rpx solid #f0f0f0;
	}

	.quick-access-item:active {
		transform: scale(0.95);
	}

	.quick-access-text {
		font-size: 32rpx;
		color: #333333;
		font-weight: 600;
	}

	.message-section {
		width: 100%;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.section-header {
		margin-bottom: 30rpx;
	}

	.title-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20rpx;
	}

	.title-text {
		font-size: 32rpx;
		color: #333333;
		font-weight: 600;
	}

	.tab-buttons {
		display: flex;
		gap: 20rpx;
	}

	.tab-button {
		font-size: 26rpx;
		color: #999999;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		transition: all 0.3s ease;
	}

	.tab-button.active {
		color: #1976D2;
		background: rgba(25, 118, 210, 0.1);
	}

	.message-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.message-item {
		display: flex;
		align-items: flex-start;
		gap: 20rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		width: 100%;
		transition: all 0.3s ease;
	}

	.message-item:active {
		background-color: #f5f5f5;
		transform: scale(0.98);
	}

	.message-item:last-child {
		border-bottom: none;
	}

	.avatar-circle {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: #1976D2;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.avatar-text {
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 600;
	}

	.message-content {
		flex: 1;
		min-width: 0;
		width: calc(100% - 100rpx);
		padding-right: 20rpx;
	}

	.message-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 8rpx;
		gap: 50rpx;
	}

	.message-title-wrapper {
		flex: 1;
		min-width: 0;
		max-width: calc(100% - 160rpx);
	}

	.message-title {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
		display: block;
		margin-bottom: 4rpx;
		word-break: break-all;
	}

	.message-time {
		font-size: 24rpx;
		color: #999999;
		flex-shrink: 0;
		white-space: nowrap;
		min-width: 100rpx;
		text-align: right;
		padding-right: 10rpx;
	}

	.message-preview {
		font-size: 12px;
		color: #666;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		max-width: calc(100% - 160rpx);
		word-break: break-all;
	}

	.schedule-section {
		width: 100%;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: 600;
		margin-bottom: 20rpx;
		display: block;
	}

	.section-more {
		font-size: 26rpx;
		color: #1976D2;
	}

	.schedule-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.schedule-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
	}

	.course-time {
		width: 120rpx;
		text-align: center;
		margin-right: 20rpx;
	}

	.time-text {
		font-size: 24rpx;
		color: #666666;
	}

	.course-info {
		flex: 1;
	}

	.course-name {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
		display: block;
		margin-bottom: 8rpx;
	}

	.course-teacher {
		font-size: 24rpx;
		color: #999999;
		display: block;
	}

	.course-status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
	}

	.course-status.upcoming {
		background: rgba(255, 152, 0, 0.1);
	}

	.course-status.live {
		background: rgba(244, 67, 54, 0.1);
	}

	.course-status.completed {
		background: rgba(76, 175, 80, 0.1);
	}

	.status-text {
		font-size: 22rpx;
		color: #666666;
	}

	.course-status.upcoming .status-text {
		color: #FF9800;
	}

	.course-status.live .status-text {
		color: #F44336;
	}

	.course-status.completed .status-text {
		color: #4CAF50;
	}

	/* 创建班级按钮 */
	.create-class-btn {
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10rpx);
		border: 2rpx solid rgba(255, 255, 255, 0.3);
		transition: all 0.3s ease;
	}

	.create-class-btn:active {
		transform: scale(0.9);
		background: rgba(255, 255, 255, 0.3);
	}

	.plus-icon {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
	}

	/* 模态框样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background: #fff;
		border-radius: 20rpx;
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
		overflow: hidden;
	}

	.modal-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.modal-body {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 15rpx;
		display: block;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background: #f8f9fa;
	}

	.form-textarea {
		width: 100%;
		height: 120rpx;
		border: 1rpx solid #ddd;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
		background: #f8f9fa;
		resize: none;
	}

	.picker-input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background: #f8f9fa;
		display: flex;
		align-items: center;
		color: #333;
	}

	.avatar-upload {
		width: 120rpx;
		height: 120rpx;
		border: 2rpx dashed #ddd;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #f8f9fa;
	}

	.avatar-preview {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	.avatar-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}

	.upload-text {
		font-size: 22rpx;
		color: #999;
	}

	.form-actions {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
	}

	.cancel-btn, .confirm-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		border: none;
	}

	.cancel-btn {
		background: #f5f5f5;
		color: #666;
	}

	.confirm-btn {
		background: #1976D2;
		color: #fff;
	}

	/* 夜间模式样式 */
	.night-mode .modal-content {
		background: #2c2c2c;
	}

	.night-mode .modal-title {
		color: #e0e0e0;
	}

	.night-mode .form-label {
		color: #e0e0e0;
	}

	.night-mode .form-input,
	.night-mode .form-textarea,
	.night-mode .picker-input {
		background: #3a3a3a;
		border-color: #4a4a4a;
		color: #e0e0e0;
	}

	.night-mode .avatar-upload {
		background: #3a3a3a;
		border-color: #4a4a4a;
	}

	.night-mode .cancel-btn {
		background: #3a3a3a;
		color: #e0e0e0;
	}

	/* 日历模态框样式 */
	.calendar-modal {
		max-width: 700rpx;
	}

	.calendar-header {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.calendar-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.calendar-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 10rpx;
		margin-bottom: 30rpx;
	}

	.calendar-day {
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		background: #f8f9fa;
		transition: all 0.3s ease;
	}

	.calendar-day.selected {
		background: #1976D2;
	}

	.calendar-day.selected .day-number {
		color: #fff;
	}

	.day-number {
		font-size: 24rpx;
		color: #333;
	}

	.calendar-events {
		border-top: 1rpx solid #f0f0f0;
		padding-top: 20rpx;
	}

	.events-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
		display: block;
	}

	.event-item {
		padding: 10rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.event-text {
		font-size: 26rpx;
		color: #666;
	}

	/* 待办模态框样式 */
	.todo-modal {
		max-width: 600rpx;
	}

	.todo-list {
		margin-bottom: 30rpx;
	}

	.todo-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.todo-item.completed .todo-title {
		text-decoration: line-through;
		color: #999;
	}

	.todo-checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ddd;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		background: #fff;
	}

	.todo-title {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.todo-date {
		font-size: 24rpx;
		color: #999;
		margin-left: 20rpx;
	}

	.add-todo-section {
		display: flex;
		gap: 15rpx;
		align-items: center;
	}

	.add-todo-input {
		flex: 1;
		height: 60rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		padding: 0 15rpx;
		font-size: 26rpx;
		background: #f8f9fa;
	}

	.add-todo-btn {
		height: 60rpx;
		padding: 0 30rpx;
		background: #1976D2;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		font-size: 26rpx;
	}

	/* 夜间模式样式 */
	.night-mode .calendar-title {
		color: #e0e0e0;
	}

	.night-mode .calendar-day {
		background: #3a3a3a;
	}

	.night-mode .day-number {
		color: #e0e0e0;
	}

	.night-mode .events-title {
		color: #e0e0e0;
	}

	.night-mode .event-text {
		color: #b0b0b0;
	}

	.night-mode .todo-title {
		color: #e0e0e0;
	}

	.night-mode .todo-checkbox {
		background: #3a3a3a;
		border-color: #4a4a4a;
	}

	.night-mode .add-todo-input {
		background: #3a3a3a;
		border-color: #4a4a4a;
		color: #e0e0e0;
	}
</style>
